<template>
  <panel title="最近7天服务异常统计">
    <div class="ml20 mr20">
      <x-row>
        <x-col :span="24">
          <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'StallStatistic',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.chartOptions = {
        grid: {
          containLabel: true,
          left: '3%',
          right: '3%',
          bottom: '10%',
          top: '10%'
        },
        legend: {
          data: [
            {
              name: '设备停用',
              icon: 'circle'
            },
            {
              name: '管压异常',
              icon: 'circle'
            },
            {
              name: '液位异常',
              icon: 'circle'
            }
          ],
          align: 'left',
          right: 0,
          top: 0,
          orient: 'horizontal',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: [{
          type: 'category',
          data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '设备停用',
          type: 'line',
          stack: '电量',
          data: [320, 395, 380, 334, 490, 330, 220, 232, 301, 234, 330, 520, 332, 251, 204]
        }, {
          name: '管压异常',
          type: 'line',
          stack: '电量',
          itemStyle: {
            normal: {
              color: '#00bcd4'
            }
          },
          data: [320, 330, 320, 320, 332, 320, 334, 332, 321, 334, 330, 320, 332, 322, 334]
        }, {
          name: '液位异常',
          type: 'line',
          stack: '电量',
          itemStyle: {
            normal: {
              color: '#cb8722'
            }
          },
          data: [320, 330, 320, 320, 332, 320, 334, 332, 321, 334, 330, 320, 332, 322, 334]
        }]
      }
    }
  }
}
</script>
